<%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%--@elvariable id="contextPath" type="java.lang.String"--%>
<%--@elvariable id="countries" type="org.parademo.web.model.TopicView"--%>

<head>
    <script language="javascript" type="text/javascript">
        function cancel() {
            document.getElementById("topicForm").action = window.back();
        }
    </script>
</head>

<div class="topicList">
    <h2>View Topics</h2>

    <form:form method="POST" action="${contextPath}/topic" commandName="topic" class="topicForm" id="topicForm">
        Make this a selectable table using JQuery?
        <table class="topicListTable">
            <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${topics}" var="topic">
                <tr>
                    <td>${topic.name}</td>
                    <td>${topic.description}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <br/>
        <h2>Create Topic</h2>
        <table class="topicListTable">
            <tr>
                <td>
                    <label for="name">Name</label>
                </td>
                <td>
                    <form:input path="name" id="name" />
                    <form:errors path="name" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="description">Description</label>
                </td>
                <td>
                    <form:input path="description" id="description" />
                    <form:errors path="description" />
                </td>
            </tr>
            </table>

            <br/>
            <br/>

            <table align="center">
                <tr>
                    <td>
                        <a class="medium black button" href="javascript:"
                           onclick="document.getElementById('topicForm').submit();">
                            Submit
                        </a>
                        <a class="medium red button" href="javascript:" onclick="cancel()">
                            Cancel
                        </a>
                    </td>
                </tr>
            </table>
    </form:form>
</div>